<template>
	<view class="content" >
	<view v-if="is_config == 1">
		<view class="tab-box" v-if="showTap" >
			<u-tabs :list="tabList" @click="tabChange" :scrollable="false" lineColor="#4871C0" :current="activeIndex"
				lineWidth="70rpx" lineHeight="5rpx" :activeStyle="{
			    color: '#4871C0',
			    fontWeight: 'bold',
				fontSize:'28rpx',
			}" :inactiveStyle="{
			    color: '#999999',
				fontSize:'28rpx',
			}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:30%;padding-bottom:10rpx;"></u-tabs>
		</view>
		<!-- 会议室管理 -->
		<view class="list" v-if="activeIndex == 0">
			<view class="list-item" v-for="(item,index) in dataList1" :key="index" @click="godetails(item.id)">
				<!-- 	<view class="item-img">
					<u--image :src=item.user.avatar shape="circle" width="44rpx" height="44rpx">
					</u--image>
				</view> -->
				<view class="item-info">
					<view class="item-tile">
						<view class="title">{{item.name}}</view>
						<text class="state state1" v-if="item.status_text=='关闭'">{{item.status_text}}</text>
					</view>
					<view class="address">
						<view class="item-img">
							<u--image :src="auth_icon" shape="circle" width="32rpx" height="32rpx">
							</u--image>
						</view>
						{{item.nickname}}
						<view class="item-img">
							<u--image :src="addr_icon" shape="circle" width="32rpx" height="32rpx">
							</u--image>
						</view>{{item.title}}
					</view>
					<!-- <view class="time">
						{{item.time}}
					</view> -->
					<view class="u-flex">
						<view class="item-button">
							<text>{{item.people}}</text>
						</view>
						<view class="item-button">
							<text>{{item.room_type_text}}</text>
						</view>
						<view class="item-button">
							<text>{{item.time_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore v-if="dataList1.length" :status="loadStatus" />

			<u-empty v-if="!dataList1.length && !isLoading" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<!-- 会议室类型管理 -->
		<view class="list" v-if="activeIndex == 1">
			<view class="list-item" v-for="(item,index) in dataList2" :key="index" @click="godetails2(item.id)">
				<view class="item-info">
					<view class="item-tile">
						<view class="title">{{item.title}}</view>
					</view>
					<view class="address">
						{{item.desc}} 
					</view>
					<view class="u-flex-content">
						<view class="u-flex-title">发起人:</view>
						<view class="item-img" v-for="(item1,i) in item.faqi_ids" :key="i">
							<view class="item-img-bg" v-show="i<4">{{strFormat(item1.name)}}</view>
							<!-- <u--image :src="item1.avatar" shape="circle" width="44rpx" height="44rpx" v-show="i<4">>
							</u--image> -->
							<u--image :src="more_icon" shape="circle" width="64rpx" height="64rpx" v-show="i>4&&i==5">
							</u--image>
						</view>
						 
					</view>
					<view class="u-flex-content">
						<view class="u-flex-title">参会人:</view>
						<view class="item-img" v-for="(item2,i) in item.attend_meet_ids" :key="i">
							<view class="item-img-bg" v-show="i<4">{{strFormat(item2.name)}}</view>
							<!-- <u--image :src="item2.avatar" shape="circle" width="44rpx" height="44rpx" v-show="i<4">
							</u--image> -->
							<u--image :src="more_icon" shape="circle" width="64rpx" height="64rpx" v-show="i>4&&i==5">
							</u--image>
						</view>
						 
					</view>
				</view>
			</view>
			<!-- 加载更多 -->
			<u-loadmore v-if="dataList2.length" :status="loadStatus" />

			<u-empty v-if="!dataList2.length && !isLoading" mode="data"
				icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
	</view>
	<u-empty v-if="is_config == 0" text="暂无权限"
		icon="http://cdn.uviewui.com/uview/empty/car.png">
	</u-empty>
   </view>
</template>

<script>
	import {
		getroomlists,
		gettypemeet,
		getroomconfig
	} from '@/api/meetRoomApi.js'
	export default {
		data() {
			return {
				auth_icon: require('@/static/img/mettingRoomConfig/auth-icon.png'),
				addr_icon: require('@/static/img/mettingRoomConfig/addr-icon.png'),
				more_icon:require('@/static/img/mettingRoomConfig/more-icon.png'),
				tabList: [{
					name: '会议室管理',
				}, {
					name: '会议室类型管理',
				}],
				activeIndex: 0,
				page: 1,
				limit: 12,
				lastPage: 0,
				dataList1: [],
				dataList2: [],
				loadStatus: '',
				qr_url: '',
				is_config:0,
				showTap:false
			};
		},
		onReady(){
			this.is_configdata();
		},
		onLoad() {
			this.$nextTick(() => {
				this.showTap = true
			})
		},
		onShow() {
			this.dataList1 = []
			this.page = 1;
			if (this.activeIndex == 0) {
				this.dataList1 = []
				this.getDataList1()
			} else if (this.activeIndex == 1) {
				this.dataList2 = []
				this.getDataList2()
			}
		},
		onReachBottom: function() {
			if (this.page < this.lastPage) {
				this.page += 1;
				if (this.activeIndex == 0) {
					this.getDataList1()
				} else if (this.activeIndex == 1) {
					this.getDataList2()
				}
			}
		},
		methods: {
			strFormat(str){
				if(str.length>3){
					return str.substring(0,3)+'...';
				}else{
					return str
				}
			},
			is_configdata(){
				getroomconfig().then(res => {
					this.is_config = res.data.is_confg
				})
			},
			tabChange(item) {
				console.log('item', item);
				this.activeIndex = item.index;
				// uni.setStorageSync('tab_cur_index1', this.activeIndex);
				this.page = 1;
				this.lastPage = 0;
				this.loadStatus = "";
				if (this.activeIndex == 0) {
					this.dataList1 = []
					this.getDataList1()
				} else if (this.activeIndex == 1) {
					this.dataList2 = []
					this.getDataList2()
				}
			},
			changTiem(index) {
				this.activeNum = index;
			},
			// 我参与的列表
			getDataList1() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit
				};
				getroomlists(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList1 = [...this.dataList1, ...res.data.data]
				})
			},
			// 我发布的列表
			getDataList2() {
				this.loadStatus = 'loading';
				this.isLoading = true;
				let params = {
					page: this.page,
					limit: this.limit
				};
				gettypemeet(params).then(res => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
					console.log(res)
					this.lastPage = res.data.last_page
					this.loadStatus = this.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					this.dataList2 = [...this.dataList2, ...res.data.data]
				})
			},

			godetails(id) {
				uni.navigateTo({
					url: '/pages/tabbar/mettingRoomConfig/mettingConfigDetail?id=' + id
				});
			},
			// 会议室类型
			godetails2(id) {
				uni.navigateTo({
					url: '/pages/tabbar/mettingRoomConfig/mettingTypeDetail?id=' + id
				});
			},
		}
	};
</script>

<style>
	.content {
		background-color: #F8F8F8;
		min-height: 100vh;
	}

	.u-flex {
		display: flex;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}
	.u-flex-content {
		display: flex;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
   .u-flex-title{
	   font-size: 24rpx;
	   font-weight: 500;
	   color: #666666;
	   margin-right: 20rpx;
   }
   .u-flex-content .item-img{margin-right: 10rpx;}
   .item-img-bg{
	   width:64rpx;
		height:64rpx;
		border-radius: 50%;
		background-color: #4871C0;
		color: #ffffff;
		font-size: 20rpx;
		text-align: center;
		line-height: 64rpx;
   }
	.tab-box {
		padding: 20rpx 0;
		background-color: #fff;
		border-bottom: 6rpx solid #F8F8F8;
	}

	.time-box {
		padding: 28rpx 30rpx;
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-weight: 500;
		background: #fff;
	}

	.serach {
		margin-left: auto;
		width: 32rpx;
		height: 32rpx;
	}

	.tiem-tiem {
		padding: 14rpx 26rpx;
		background: #F3F3F3;
		color: #999999;
		border-radius: 162px 162px 162px 162px;
		opacity: 1;
		margin-right: 28rpx;
	}

	.active {
		opacity: 1;
		background-color: #fff;
		border: 1px solid #4871C0;
		color: #4871C0;
	}

	.list {
		padding: 20rpx 24rpx;
	}

	.list-item {
		padding: 30rpx 24rpx 30rpx 20rpx;
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: flex-start;
	}

	.item-info {
		margin-left: 10rpx;
	}

	.item-tile {
		display: flex;
		align-items: center;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		max-width: 78%;
		margin-right: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		/* border: 1px solid red; */
	}

	.state {
		font-size: 24rpx;
		font-weight: 500;
		padding: 4rpx 10rpx;
	}

	.state1 {
		color: #ffffff;
		background: #999999;
		border-radius: 8rpx;
		opacity: 1;
	}

	.address {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.time {
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		margin-top: 10rpx;
	}

	.item-button {
		text-align: right;
		margin-right: 20rpx;
	}

	.item-button text {
		text-align: center;
		display: inline-block;
		font-size: 28rpx;
		font-weight: 500;
		color: #4871C0;
		height: 64rpx;
		line-height: 64rpx;
		background: #F1F6FF;
		border-radius: 16rpx;
		opacity: 1;
		padding: 0 10rpx;
	}
</style>
